<template>
	<view class="nav-bar">
		<view class="navbox"
		:class="{'navbox-fixed':fixed,'navbox-opacity':opacity}"
		:style="{background:background,color:light?'#fff':'#606060'}"
		>
			<view class="statusbox" :style="{height:`${statusBarHeight}px`}"></view>
			<view class="navwrap">
				<view class="nav" :style="{width:`${navWidth}px`,height:`${navheight}px`}">
					<slot  name="all">
						<view class="navleft" @click="handleBack">
							<slot name="left">
								<vs-icon  :color="light?'#fff':'#606060'" name="icon-ziyuan" size="16"></vs-icon>
							</slot>
						</view>
						<view class="navcenter">
							<slot name="center">
								<view class="c-title">{{title}}</view>
							</slot>
						</view>
						<view class="navserch" v-if="serch">
							<input class="s-input" />
							<vs-icon class="icon-serch" :color="'#606060'" name="icon-sousuo" size="16"></vs-icon>
						</view>
						<view class="navright">
							<slot name="right">
								
							</slot>
						</view>
					</slot>
				</view>
			</view>
		</view>
		<view v-if="topHeight" :style="{height:`${statusBarHeight + navheight}px`,width:'100%',}"></view><!-- 顶部填充 -->
	</view>
</template>

<script>
	/*
	* slot:left/center/right
	* props
	* title:标题;
	* topHeight:{false,true};导航栏fiexed时候，顶部区域可以设置占位高度，
	* 
	* 
	* 
	* 
	*/
	
	// 获取系统状态栏的高度
		let devInfo = uni.getSystemInfoSync();
		let menuInfo = {};
	// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
	// #ifdef MP
		menuInfo = uni.getMenuButtonBoundingClientRect();
	// #endif
	export default {
		props: {
			animation:{},
			title: {
				type: String,
				default: ''
			},
			height:{
				type:[String,Number],
				default:''
			},
			topHeight:{		//导航 fixed状态下是否顶部填充高度
				type:Boolean,
				default:false
			},
			background:{},//背景色
			light:{
				type:Boolean,
				default:false
			},//全局文字颜色
			midColor:{},//title颜色
			rightColor:{},//右边title颜色
			midSize:{},//tittle字体大小
			opacity:{	//背景透明
				type:Boolean,
				default:false
			},
			shadow:{	//阴影
				type:Boolean,
				default:false
			},
			fixed:{
				type:Boolean,
				default:false
			},
			serch:{
				type:Boolean,
				default:false
			}
		},
		computed:{
			navheight(){
				// let height = this.height?this.height:menuInfo.height + (menuInfo.top - devInfo.statusBarHeight)*2 ;
				// console.log(height);
				return this.height?parseInt(this.height):44
			}
			
		},
		data() {
			return {
				statusBarHeight:devInfo.statusBarHeight,
				navWidth:menuInfo.left
			}
		},
		
		mounted() {
			// console.log( uni.getSystemInfoSync());
			
		},
		methods: {
			handleBack(e){
				this.$Router.back(1)
				this.$emit('back',e)
			},
			fnRightClick(e){
				this.$emit('rightClick',e)
			},
			back(){
				console.log(99999);
			}
			
		}

	}
</script>

<style lang="scss" scoped>
	$barheight:40px;
	.nav-bar{ 
		width: 100%;
		.statusbox{
			width: 100%;
		}
		.navbox{
			width: 100%;
			color: #606060;
			background: #F3F4F6;
			&-fixed{
				position: fixed;
				top: 0px;left: 0;
				z-index: 99;
			}
			&-opacity{
				background: rgba(0,0,0,0);
			}
			.navwrap{
				width: 100%;
				// background-color: #A0CFFF;
				box-sizing: border-box;
				.nav{
					width: 100%;
					// background: #f452ff;
					display: flex;
					align-items: center;
					padding: 0 5px 0 0;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					
					.navleft{
						height: 100%;
						//background: #FF9900;
						display: flex;
						align-items: center;
						padding: 0 5px;
					}
					.navcenter{
						//min-width: 50px;
						//background: #19BE6B;
						//height: 100%;
						display: flex;
						align-items: center;
						/* #ifndef MP */
						justify-content: center;
						/* #endif */
						font-size: 16px;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						.c-title{
							// max-width: 50px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							padding-bottom: 1px;
						}
					}
					.navright{
						height: 100%;
						//background: #2979FF;
						display: flex;
						align-items: center;
					}
					.navserch{
						width: 100%;
						min-width: 100px;
						//background: #15BB31;
						position: relative;
						flex: 1;
						padding: 2px;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						.s-input{
							width: 100%;
							min-height: 25px;
							background: #F3F4F6;
							border-radius: 8px;
							padding: 0 10px 0 8px;
							box-sizing: border-box;
						}
						.icon-serch{
							position: absolute;
							right: 3%;
						}
					}
				}
			}
			
		}
	}

	
</style>
